<template>
  <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      :default-sort = "{prop: 'date', order: 'descending'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column type="expand" >
      <template #default="props">
        <el-table :data="props.row.ChildObject" label-position="left" inline class="demo-table-expand">
          <el-table-column label="学分" prop="creditNumber">
          </el-table-column>
          <el-table-column label="申请理由" prop="reason">
          </el-table-column>
          <el-table-column label="申请凭证" prop="pic_path">
            <template #default="scope">
              <el-image  :src="url+scope.row.pic_path" min-width="70" height="70" alt="" :preview-src-list="url+scope.row.pic_path"></el-image>
              <!--            v-for="item in scope.row.pic_path.split(',')" v-if="item ? item : '' "-->
            </template>
          </el-table-column>
          <el-table-column label="申请时间" prop="apply_Time">
          </el-table-column>
          <el-table-column label="审批时间" prop="judge_Time">
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column
        label="Date"
        sortable
        prop="apply_Time">
    </el-table-column>
    <el-table-column label="申请信息">
      <el-table-column
          label="姓名"
          prop="name">
      </el-table-column>
      <el-table-column
          label="班级"
          prop="class">
      </el-table-column>
      <el-table-column
          label="学号"
          prop="account">
      </el-table-column>
      <el-table-column label="状态" prop="state">
        <template #default="scope">
            <span v-if="scope.row.state===0">
              <i class="el-icon-info" style="color: #ccec5b" aria-hidden="true"></i>
            </span>
          <span v-if="scope.row.state===1">
              <i class="el-icon-success" style="color: #39cf7c" aria-hidden="true"></i>
            </span>
          <span v-if="scope.row.state===2">
              <i class="el-icon-error" style="color: #ED3F14" aria-hidden="true"></i>
            </span>
          <span :style="{ color: scope.row.state === 1 ? '#39cf7c' :scope.row.state === 0 ? '#ccec5b':'#ED3F14' }">{{ scope.row.state === 1 ? '已通过' :scope.row.state === 0 ? '待审批':'未通过' }}</span>
        </template>
      </el-table-column>
      <el-table-column
          align="right">
        <template #header>
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>

        <template #default="scope">
          <template v-if="scope.row.state===0">
            <el-button
                size="mini"
                @click="handleAgree(scope.$index, scope.row)">同意</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDeny(scope.$index, scope.row)">拒绝</el-button>
          </template>
          <template v-if="scope.row.state===1"></template>

        </template>
      </el-table-column>
    </el-table-column>


  </el-table>
</template>
<script lang="ts">
import {getCurrentInstance} from "vue";
import {getAllApply} from "@/network/manager/getAllApply";
import {AgreeToStudentRequest} from "@/network/manager/AgreeToStudentRequest";
import {DenyStudentRequest} from "@/network/manager/DenyStudentRequest";
import {ElMessage} from "element-plus";
import qs from 'qs'

export default {
  name:'LocalStudentsApply',
  data(){
    return{
      tableData: [],
      search: '',
      url: 'http://localhost:7070'
    }
  },
  setup(){
    const {proxy}:any=getCurrentInstance();
    const Manager_id=localStorage.getItem('ManagerId')
    console.log(Manager_id)
    getAllApply(Manager_id).then(result=>{
      console.log(result.data.result)
      proxy.tableData=result.data.result

    }).catch(err=>{

    })

    function handleAgree(index, row) {
      console.log(index, row)
      console.log(row.cid)//获取cid
      console.log(row.sid)//获取sid
      const AgreeToStudentRequest_cid=row.cid

      const AgreeToStudentRequest_data={
        sid:row.sid,
        credit:row.credit,
        creditNumber:row.creditNumber
      }
      AgreeToStudentRequest(AgreeToStudentRequest_cid,qs.stringify(AgreeToStudentRequest_data)).then(result=>{

        const msg = result.data.msg;
        //打印返回结果状态，
        if (result.data.status == 1) {
          ElMessage.error(msg);
        } else {
          proxy.tableData.splice(index, 1)
          console.log(msg)
          ElMessage.success({
            message: msg, type: 'success'
          });

        }

      }).catch(err=>{
        console.log("同意学分请求失败")
        const msg = "同意学分请求失败！请稍后尝试！";
        ElMessage.error(msg);
      })
    }

    function handleDeny(index, row) {
      console.log(index, row);
      console.log(row.cid)//获取cid
      console.log(row.sid)//获取sid
      const DenyStudentRequest_cid=row.cid
      const DenyStudentRequest_data={
        sid:row.sid
      }
      DenyStudentRequest(DenyStudentRequest_cid,qs.stringify(DenyStudentRequest_data)).then(result=>{
        const msg = result.data.msg;
        //打印返回结果状态，
        if (result.data.status == 1) {
          ElMessage.error(msg);
        } else {
          proxy.tableData.splice(index, 1)
          console.log(msg)
          ElMessage.success({
            message: msg, type: 'success'
          });

        }

      }).catch(err=>{
        console.log("拒绝学分请求失败")
        const msg = "拒绝学分请求失败！请稍后尝试！";
        ElMessage.error(msg);
      })
    }

    return{
      handleAgree,
      handleDeny
    }
  }
}
</script>
